<form [formGroup]="cardForm" (ngSubmit)="onSubmit()">
  <div>
    <label>持卡人姓名</label>
    <input formControlName="name" placeholder="请输入持卡人姓名" />
    <div *ngIf="submitted && f['name'].errors">
      <small *ngIf="f['name'].errors?.['required']">姓名必填</small>
    </div>
  </div>
  <div>
    <label>卡号</label>
    <input formControlName="number" maxlength="16" placeholder="请输入16位卡号" />
    <div *ngIf="submitted && f['number'].errors">
      <small *ngIf="f['number'].errors?.['required']">卡号必填</small>
      <small *ngIf="f['number'].errors?.['pattern']">卡号格式错误</small>
    </div>
  </div>
  <div>
    <label>有效期</label>
    <input formControlName="expiry" placeholder="MM/YY" maxlength="5" />
    <div *ngIf="submitted && f['expiry'].errors">
      <small *ngIf="f['expiry'].errors?.['required']">有效期必填</small>
      <small *ngIf="f['expiry'].errors?.['pattern']">格式应为 MM/YY</small>
    </div>
  </div>
  <div>
    <label>CVV</label>
    <input formControlName="cvv" maxlength="4" placeholder="CVV" type="password" />
    <div *ngIf="submitted && f['cvv'].errors">
      <small *ngIf="f['cvv'].errors?.['required']">CVV必填</small>
      <small *ngIf="f['cvv'].errors?.['pattern']">CVV格式错误</small>
    </div>
  </div>
  <div>
    <label>上传信用卡图片</label>
    <input #fileInput type="file" (change)="onFileSelected($event)" accept="image/*" style="display: none" />
    <button type="button" (click)="fileInput.click()" [disabled]="scanning">Scan</button>
    <span *ngIf="scanning">识别中...</span>
    <div *ngIf="scanResult">
      <small>OCR结果: {{ scanResult }}</small>
    </div>
  </div>
  <div *ngIf="showCropper">
    <image-cropper
      [imageChangedEvent]="imageChangedEvent"
      [maintainAspectRatio]="false"
      [allowMoveImage]="true"
      [aspectRatio]="1.586"
      format="jpeg"
      [imageQuality]="80"
      (imageCropped)="imageCropped($event)"
      [transform]="transform"
    ></image-cropper>
    <div class="cropper-buttons">
      <button type="button" (click)="rotate(-90)">向左旋转</button>
      <button type="button" (click)="rotate(90)">向右旋转</button>
      <button type="button" (click)="rotate(-2)">向左微调</button>
      <button type="button" (click)="rotate(2)">向右微调</button>
      <button type="button" (click)="zoom(-0.1)">缩小</button>
      <button type="button" (click)="zoom(0.1)">放大</button>
      <button type="button" (click)="scanCard()" [disabled]="!croppedImage">裁剪并识别</button>
      <button type="button" (click)="cancelCrop()">取消</button>
    </div>
  </div>
  <button type="submit">提交</button>
</form>
